<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Maps</title>
    <style type="text/css">
        #allmap {
            width: 100%;
            height: 100%;
        }

        #allmap audio,
        #allmap canvas,
        #allmap img,
        #allmap svg,
        #allmap video {
            max-width: none !important
        }
    </style>
</head>

<body>
<div id="allmap"></div>
</body>
<script src="http://api.map.baidu.com/api?v=2.0&ak=jMBhzgRuml9p2ouvLD3rrEXFe62mUMuW"></script>
<script type="text/javascript">
    var BMapPointIcon = "";

    var map = new BMap.Map("allmap");
    var zoomlevel = '15'; //地图zoom级别

    var lng = new Array();
    var lat = new Array();
    var radius = new Array();

    var all = window.location.hash.replace('#', '').split('&');

    for (var i = 0; i < all.length; i++) {
        lat[i] = all[i].split(',')[0];
        lng[i] = all[i].split(',')[1];
    }

    radius[0] = 2000;

    radius[1] = 2000;

    radius[2] = -1;

    // 百度地图API功能
    var point = new BMap.Point(lng[2], lat[2]);
    map.centerAndZoom(point, zoomlevel);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 -地图 微信  new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })
    // 添加地图类型控件，控件展示的地图类型为普通图、卫星加路网混合图
    //map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));

    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})); //比例尺
    map.addControl(new BMap.GeolocationControl()); //定位到当前
    //setTimeout(function(){map.panTo(new BMap.Point(lng[0], lat[0]));}, 100);//100ms后移动到第一个中心
    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl); // 添加定位控件

    // 覆盖区域图层测试
    //map.addTileLayer(new BMap.PanoramaCoverageLayer());//测试用的
    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    stCtrl.setOffset(new BMap.Size(20, 50));
    map.addControl(stCtrl); //添加全景控件

    // 编写自定义函数,创建标注
    for (let i = 0; i < lng.length; i++) {
        var point = new BMap.Point(lng[i], lat[i]);
        var sContent = "地区：";
        if (i == 2) {
            sContent = sContent + "中心点";
        } else {
            sContent = sContent + (i + 1);
        }
        sContent = sContent + "<br>纬度：" + lat[i] + "<br>经度：" + lng[i];
        if (radius[i] > 0) {
            sContent = sContent + "<br>半径：" + radius[i];
        }
        var label = new BMap.Label(sContent, {offset: new BMap.Size(20, -10 * i)});
        addMarker(point, BMapPointIcon);
        marker.setLabel(label);
        addCircle(point, radius[i]); //增加圆
    }

    function addMarker(point, BMapPointIcon) {
        var myIcon = new BMap.Icon(BMapPointIcon, new BMap.Size(12, 13));
        marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker); //添加红点

    }

    function addCircle(point, radius) {
        //增加圆 {fillOpacity:0.5, strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.8 }
        var circle = new BMap.Circle(point, radius, {
            strokeColor: "red",
            fillColor: "red",
            strokeWeight: 2,
            fillOpacity: 0.001,
            strokeOpacity: 0.8
        });
        map.addOverlay(circle); //增加圆
        circle.hide();
        circle.show();
        //hideOver();
    }
</script>
</html>